<template>
  <view class="shop-img">
    <view class="img-box" v-for="(item,index) in imgList" :key="index">
      <u-image width="710rpx" border-radius="10rpx" height="300rpx" :src="IMG_URL + item.image"></u-image>
      <view class="top" @click="del(item)">
        <view class="del">
          <u-icon size="40" name="/static/image/userDetails/shanchu.png"></u-icon>
        </view>
      </view>
    </view>
    <view>
      <u-button :disabled="imgList.length>=6" :custom-style="customStyle" shape="circle" @click="toShopUpload">{{
          `上传照片 ${imgList.length} / 6`
        }}
      </u-button>
    </view>
  </view>
</template>

<script>
import {delShopImg} from "../../../../api/shop";
import {getShop} from "../../../../api/business";
import {IMG_URL} from "../../../../config/URL";

export default {
  onShow() {
    this.imgList = uni.getStorageSync('shopInfo').links
  },
  name: "index",
  data() {
    return {
      IMG_URL,
      customStyle: {
        marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        color: 'white',
        backgroundColor: '#10d169',
      },
      imgList: []
    }
  },
  methods: {
    async del(item){
      uni.showLoading({
        title: '删除中'
      });

      const res = await delShopImg({
        ids:[item.id]
      })
      if (res.data.code == 500) {
        uni.showToast({
          title: res.data.msg,
          duration: 2000,
          icon:'none'
        });
        uni.hideLoading();
      }else{
        const shop = await getShop({
          f_user_id: uni.getStorageSync('userInfo').id
        })
        uni.setStorageSync('shopInfo', shop.data.data);
        this.imgList = uni.getStorageSync('shopInfo').links
        uni.hideLoading();
        uni.showToast({
          title: '删除成功',
          duration: 2000,
          icon:'success'
        });
      }
    },

    toShopUpload() {
      uni.navigateTo({ url: '/subPages/subUser/businessettled/shopUpload/index' })
    }
  }
}
</script>

<style lang="scss" scoped>
.shop-img {
  min-height: 100vh;
  padding: 20rpx;

  .img-box {
    margin-bottom: 40rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    height: 300rpx;
    border-radius: 20rpx;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

    .top {
      display: flex;
      justify-content: flex-end;
      padding: 10rpx;
      position: relative;
      top: -300rpx;

    }
  }
}
</style>
